<template>
  <div class="flowlist">
    <form action="/">
      <van-search placeholder="请输入关键字" v-model="sval" clearable show-action @search="onSearch" @clear="onCancel">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </form>
    <div style="height:6vh;">
      <van-tabs @click="tabFlowlist">
        <van-tab title="待办"></van-tab>
        <van-tab title="已办"></van-tab>
        <van-tab title="待发"></van-tab>
        <van-tab title="已发"></van-tab>
      </van-tabs>
    </div>
    <div v-show="actiontype === 'mytask' && actioncode === 'unhandle'" style="margin-top:6vh;">
      <van-button type="info" size="small" @click="toggleAll" style="margin-left:5vw;">全选</van-button>
      <van-button type="info" size="small" @click="openOptionView('agree')" style="margin-left:5vw;">同意</van-button>
      <van-button type="info" size="small" @click="openOptionView('sendback')" style="margin-left:5vw;">退回</van-button>
      <van-button type="info" size="small" @click="read()" style="margin-left:5vw;">阅读</van-button>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :style="'margin-top:4vh;margin-bottom:8vh;'">
      <van-list v-model="loading" :finished="finished" finished-text="已加载全部数据" @load="onLoad">
        <template v-if="actiontype === 'mytask' && actioncode === 'unhandle'">
          <van-checkbox-group v-model="selecteddata" ref="checkboxGroup">

            <van-row v-for="item in list" :key="item.id" type="flex" align="center" class="L-flow-item">
              <van-col :span="4" class="checkbox-item" v-if="actioncode === 'unhandle'">
                <van-checkbox :name="item.idflow" />
              </van-col>
              <van-col :span="20">
                <span v-html="item.title"></span>
                <el-tag v-if="item.procestype === '知会操作'" style="margin-left:10px" size="mini">知会</el-tag>
              </van-col>
              <van-col :span="4" style="text-align:center">
                <span class="L-btn-mini">取回</span>
                <!-- <van-button square type="info" text="取回" @click="flowBack(item)" /> -->
                <!-- <el-button @click="flowBack(item)" type="text">取回</el-button> -->
              </van-col>
            </van-row>
            <!-- <div style="display:table;" v-for="item in list" :key="item.id" >
              <van-checkbox style="display:table-cell;vertical-align:middle;padding-left:10px;" :name="item.idflow" slot="right-icon"/>
              <van-cell style="display:table-cell;vertical-align:middle;" clickable :value="item.value" :label="item.label" @click="openFlowCard(item)">
                <div v-html="item.title"></div>
              </van-cell>
            </div> -->
          </van-checkbox-group>
        </template>
        <template v-else-if="actiontype === 'mytask' && actioncode === 'handle'">
          <van-swipe-cell v-for="item in list" :key="item.id">
            <van-cell :value="item.value" :label="item.label" @click="openFlowCard(item)">
              <div v-html="item.title"></div>
            </van-cell>
            <template slot="right">
              <van-button square type="info" text="取回" @click="flowBack(item)" />
            </template>
          </van-swipe-cell>
        </template>
        <template v-if="actiontype === 'mysend' && actioncode === 'handle'">
          <van-swipe-cell v-for="item in list" :key="item.id">
            <van-cell :value="item.value" :label="item.label" @click="openFlowCard(item)">
              <div v-html="item.title"></div>

            </van-cell>
            <template slot="right">
              <van-button square type="info" text="取回" @click="flowBack(item)" />
            </template>
          </van-swipe-cell>
        </template>
        <template v-else-if="actiontype === 'mysend' && actioncode === 'unhandle'">
          <van-swipe-cell v-for="item in list" :key="item.id">
            <van-cell :value="item.value" :label="item.label" @click="openFlowCard(item)">
              <div v-html="item.title"></div>
            </van-cell>
            <template slot="right">
              <van-button square type="info" text="提交" @click="flowSubmit(item)" />
            </template>
          </van-swipe-cell>
        </template>
      </van-list>
    </van-pull-refresh>

    <van-popup v-model="optionshow" style="width:80vw;">
      <van-panel title="审批意见">
        <div>
          <van-field v-model="opinion" rows="1" autosize label="意见" type="textarea" placeholder="请输入" />
        </div>
        <div slot="footer" style="text-align:right;">
          <van-button size="small" @click="execFlow">确认</van-button>
        </div>
      </van-panel>
    </van-popup>
    <van-tabbar v-model="buttomactive" safe-area-inset-bottom>
      <van-tabbar-item icon="home-o" @click="menuChange('homepage')">主页</van-tabbar-item>
      <van-tabbar-item icon="label-o" @click="menuChange('flowlist')">审批</van-tabbar-item>
      <van-tabbar-item icon="qr" @click="menuChange('main')">功能</van-tabbar-item>
      <van-tabbar-item icon="chart-trending-o" @click="menuChange('report')">分析</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="menuChange('mine')">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, List, Cell, PullRefresh, Toast, Tabbar, TabbarItem, Popup, Icon, SwipeCell, Dialog, Checkbox, CheckboxGroup, Panel, Tab, Tabs } from 'vant'
import qs from 'qs'
Vue.use(Search).use(List).use(Cell).use(PullRefresh).use(Toast).use(Tabbar).use(TabbarItem).use(Popup).use(Icon).use(SwipeCell).use(Dialog).use(Checkbox).use(CheckboxGroup).use(Panel).use(Tabs).use(Tab)
export default {
  name: 'flowlist',
  data () {
    return {
      idobject: this.$route.query.idobject,
      actiontype: this.$route.query.actiontype,
      actioncode: this.$route.query.actioncode,
      sval: '',
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
      active: 0,
      startline: 1,
      pagecount: 20,
      show: false,
      selecteddata: [],
      optionshow: false,
      operation: '',
      opinion: '',
      isDisable: false,
      buttomactive: 1
    }
  },
  methods: {
    onLoad () {
      if (this.actiontype === '') {
        this.actiontype = 'mytask'
      }
      if (this.actioncode === '') {
        this.actioncode = 'unhandle'
      }
      let data = {
        'actiontype': this.actiontype,
        'actioncode': this.actioncode,
        'startline': this.startline,
        'pagecount': this.pagecount,
        'condition': this.sval
      }
      this.axios({
        method: 'post',
        url: '/api/' + this.idobject + '.list.do',
        data: qs.stringify(data)
      }).then(res => {
        //console.log(res)
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          let rsdata = res.data.jsondata.approvallist
          for (let i = 0; i < rsdata.length; i++) {
            this.list.push(rsdata[i])
          }
          if (rsdata == null || rsdata.length === 0 || rsdata.length < this.pagecount) {
            this.loading = false
            this.finished = true
          } else {
            this.startline = this.startline + rsdata.length
            this.loading = false
          }
        }
      }).catch(res => {
        this.reserror(res)
      })
    },
    onRefresh () {
      this.list = []
      this.startline = 1
      this.finished = false
      this.loading = true
      this.isLoading = false
      this.onLoad()
    },
    menuChange (option) {
      if (option === 'flowlist') {
        this.$router.push({ name: 'flowlist', query: { idobject: 'flowclmx', actiontype: 'mytask', actioncode: 'unhandle', stitle: 'flowclmx' } })
      } else if (option === 'report') {
        this.$router.push({ name: 'reportlist', query: { idobject: 'report', stitle: 'report' } })
      } else if (option === 'main') {
        this.$router.push({ name: 'main' })
      } else if (option === 'homepage') {
        this.$router.push({ name: 'homepage' })
      } else if (option === 'mine') {
        this.$router.push({ name: 'mine' })
      }
    },
    onSearch () {
      this.list = []
      this.startline = 1
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    onCancel () {
      this.sval = ''
    },
    tabFlowlist (name, title) {
      let type = ''
      let code = ''
      if (title === '待办') {
        type = 'mytask'
        code = 'unhandle'
      } else if (title === '已办') {
        type = 'mytask'
        code = 'handle'
      } else if (title === '待发') {
        type = 'mysend'
        code = 'unhandle'
      } else if (title === '已发') {
        type = 'mysend'
        code = 'handle'
      }
      this.actiontype = type
      this.actioncode = code
      this.list = []
      this.startline = 1
      this.finished = false
      this.loading = true
      this.isLoading = false
      this.onLoad()
    },
    toggle (index) {
      this.$refs.checkboxes[index].toggle()
      //console.log(this.selecteddata)
    },
    toggleAll () {
      this.$refs.checkboxGroup.toggleAll(true)
    },
    openFlowCard (item) {
      this.$router.push({ name: 'flowcard', query: { idobject: item.idobject, idbill: item.id, idflow: item.idflow, actiontype: this.actiontype, actioncode: this.actioncode } })
    },
    flowSubmit (item) {
      if (!this.isDisable) {
        this.isDisable = true
        let data = { id: item.id, idflow: item.idflow, idobject: item.idobject }
        this.axios({
          method: 'post',
          url: '/api/flowclmx.submit.do',
          data: qs.stringify(data)
        }).then(res => {
          //console.log(res)
          Toast(res.data.jsondata)
          this.isDisable = false
          this.onRefresh()
        }).catch(res => {
          this.isDisable = false
          //console.log(res)
        })
      }
    },
    flowBack (item) {
      if (!this.isDisable) {
        this.isDisable = true
        let data = { id: item.id, idflow: item.idflow, idobject: item.idobject }
        this.axios({
          method: 'post',
          url: '/api/flowclmx.back.do',
          data: qs.stringify(data)
        }).then(res => {
          //console.log(res)
          Toast(res.data.jsondata)
          this.isDisable = false
          this.onRefresh()
        }).catch(res => {
          this.isDisable = false
          //console.log(res)
        })
      }
    },
    openOptionView (operation) {
      if (this.selecteddata.length === 0) {
        Toast('请先选择数据')
        return
      }
      this.optionshow = true
      this.operation = operation
    },
    execFlow () {
      if (this.operation === 'agree') {
        this.flowAgree()
      } else if (this.operation === 'sendback') {
        this.flowSendback()
      } else if (this.operation === 'read') {
        this.flowRead()
      }
    },
    flowAgree () {
      if (!this.isDisable) {
        this.isDisable = true
        let batchoperation = ''
        for (let i = 0; i < this.selecteddata.length; i++) {
          batchoperation += this.selecteddata[i] + ';'
        }
        let data = { opinion: this.opinion, batchoperation: batchoperation }
        this.axios({
          method: 'post',
          url: '/api/flowclmx.agree.do',
          data: qs.stringify(data)
        }).then(res => {
          //console.log(res)
          Toast(res.data.des)
          if (res.data.flag === '1') {
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          }
          this.isDisable = false
          this.onRefresh()
          this.optionshow = false
          this.opinion = ''
          this.selecteddata = []
        }).catch(res => {
          this.isDisable = false
          //console.log(res)
          Toast(res)
        })
      }
    },
    read () {
      let batchoperation = ''
      for (let i = 0; i < this.selecteddata.length; i++) {
        batchoperation += this.selecteddata[i] + ';'
      }
      let data = { batchoperation: batchoperation }
      this.axios({
        method: 'post',
        url: '/api/flowclmx.read.do',
        data: qs.stringify(data)
      }).then(res => {
        //console.log(res)
        Toast(res.data.des)
        if (res.data.flag === '1') {
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        }
        this.onRefresh()
        this.selecteddata = []
      }).catch(res => {
        //console.log(res)
        Toast(res)
      })
    },
    flowSendback () {
      if (!this.isDisable) {
        this.isDisable = true
        let batchoperation = ''
        for (let i = 0; i < this.selecteddata.length; i++) {
          batchoperation += this.selecteddata[i] + ';'
        }
        let data = { opinion: this.opinion, batchoperation: batchoperation }
        this.axios({
          method: 'post',
          url: '/api/flowclmx.batsendback.do',
          data: qs.stringify(data)
        }).then(res => {
          //console.log(res)
          Toast(res.data.des)
          if (res.data.flag === '1') {
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          }
          this.isDisable = false
          this.onRefresh()
          this.optionshow = false
          this.opinion = ''
          this.selecteddata = []
        }).catch(res => {
          this.isDisable = false
          //console.log(res)
          Toast(res)
        })
      }
    }
  }
}
</script>
<style scoped>
.L-flow-item {
  width: 95%;
  margin: 15px auto;
  box-sizing: border-box;
  padding: 10px 15px;
  background: #f7f8fa;
  border-radius: 10px;
  line-height: 26px;
  color: #303133
}

.L-flow-item .checkbox-item {
  /* width: 80px; */
  text-align: center;
}

.L-flow-item .content-item {
  font-size: 16px;
  line-height: 26px;
}

.L-btn-mini {
  color: #409EFF;
  background: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 14px
}
</style>
